/**
 * Created by yzdd on 2018/6/3.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  ScrollView
} from 'react-native';
import {publicStyle, width} from "../utils/publiscStyle";
import {AddCallerOrderStore} from "../logics/AddCallerOrderStore";
import {observer} from 'mobx-react';
import {observable} from 'mobx';
import AddMaterial from "./AddMaterial";
import SerialNumber from "./SerialNumber";

const styles = StyleSheet.create({
  selectItem: {
    width,
    height: 47,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderBottomColor: "#EEEEEE",
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: "#FFFFFF"
  },
  icon5: {
    width: 7,
    height: 14
  },
  rightSelectCon: {
    flexDirection: "row",
    alignItems: "center",
  },
  font13: {
    fontSize: 16,
    color: "#000000"
  },
  font14: {
    fontSize: 16,
    color: "#BDBDBD",
    marginRight: 10
  },
  font141: {
    fontSize: 16,
    color: "#000000",
    marginRight: 10
  },
  font15: {
    fontSize: 16,
    color: "#BDBDBD",
  },
  memoView: {
    width,
    height: 150,
    backgroundColor: "#FFFFFF",
    paddingLeft: 15,
    paddingRight: 15
  },
  icon6: {
    width: 16,
    height: 16
  },
  topMemoTextView: {
    height: 42,
    width: width - 30,
    flexDirection: 'row',
    alignItems: 'center',

  },
  leftIconView: {
    height: 108,
    width: 32
  },
  rightView: {
    flex: 1
  },
  memoInput: {
    flex: 1,
    paddingTop: 0,
    textAlignVertical: 'top',
    fontSize: 16
  },
  font16: {
    fontSize: 12,
    color: "#999999"
  },
  addBtn: {
    width,
    height: 55,
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: "#1AAD19",
    justifyContent: 'center'
  },
  font17: {
    fontSize: 16,
    color: "#FFFFFF"
  },
  headerRight: {
    flexDirection: 'row',
    alignItems: "center",
    flex: 1
  },
  icon8: {
    width: 17,
    height: 17
  },
  itemHeader: {
    width,
    height: 30,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: "#F3F3F3",
    paddingLeft: 15
  },
  font23: {
    fontSize: 14,
    color: "#000000"
  },
  meItem: {
    width,
    height: 74,
    flexDirection: 'row',
    backgroundColor: "#FFFFFF",
    justifyContent: 'space-between',
    borderBottomColor: "#EEEEEE",
    borderBottomWidth: 1,
    paddingTop: 12,
    paddingBottom: 12,
    paddingLeft: 15,
    paddingRight: 15
  },
  conView: {
    flexDirection: 'column',
    justifyContent: 'space-between'
  },
  font24: {
    fontSize: 16,
    color: "#000000"
  },
  font25: {
    fontSize: 14,
    color: "#999999"
  },
  font26: {
    fontSize: 14,
    color: "#1AAD19"
  }
});
const rightArrowIcon = require("../assets/rightArrow.png");
const memoIcon = require("../assets/memo.png");
const scanIcon = require("../assets/scan.png");
const jiahaoIcon = require("../assets/jiahao.png");
//创建领用单
@observer
export default class CallerOrderInfo extends Component {
  static navigationOptions = ({navigation}) => {
    return ({
      title: "领用单详情"
    })
  }

  componentWillMount() {
    this.addCallerOrderStore.memo = "这是一段说明文字, 字数最多不要超过100字哦!如果折行了就这样显示.";
    this.addCallerOrderStore.person = "王健";
    this.addCallerOrderStore.outRoom = "王健的库房";
    this.addCallerOrderStore.inRoom = "总部";
    this.addCallerOrderStore.unit = "喔噻";
    this.addCallerOrderStore.material = [{}, {}, {}];
  }


  addCallerOrderStore = new AddCallerOrderStore();

  @observable
  showIcon = true;

  toSN = () => {
    const {navigate} = this.props.navigation;
    navigate("SerialNumber")
  }

  render() {
    return (
      <View style={publicStyle.container}>
        <ScrollView>
          <View style={{flex: 1}}>
            <View style={styles.selectItem}>
              <Text style={styles.font13}>经营单元</Text>
              <View style={styles.rightSelectCon}>
                {
                  this.addCallerOrderStore.unit === ""
                    ?
                    <Text style={styles.font14}>
                      请选择经营单元
                    </Text> :
                    <Text style={styles.font141}>{this.addCallerOrderStore.unit}</Text>
                }
                <Image
                  source={rightArrowIcon}
                  resizeMode={"contain"}
                  style={styles.icon5}
                />
              </View>
            </View>
            <View style={styles.selectItem}>
              <Text style={styles.font13}>转移类型</Text>
              <View style={styles.rightSelectCon}>
                <Text style={styles.font14}>
                  请选择转移类型
                </Text>
                <Image
                  source={rightArrowIcon}
                  resizeMode={"contain"}
                  style={styles.icon5}
                />
              </View>
            </View>
            <View style={styles.selectItem}>
              <Text style={styles.font13}>调出库房</Text>
              <View style={styles.rightSelectCon}>
                {
                  this.addCallerOrderStore.outRoom === ""
                    ?
                    <Text style={styles.font14}>
                      请选择调出库房名称
                    </Text> :
                    <Text style={styles.font141}>{this.addCallerOrderStore.outRoom}</Text>
                }
                <Image
                  source={rightArrowIcon}
                  resizeMode={"contain"}
                  style={styles.icon5}
                />
              </View>
            </View>
            <View style={styles.selectItem}>
              <Text style={styles.font13}>调入库房</Text>
              <View style={styles.rightSelectCon}>
                {
                  this.addCallerOrderStore.inRoom === ""
                    ?
                    <Text style={styles.font14}>
                      请选择调入库房名称
                    </Text> :
                    <Text style={styles.font141}>{this.addCallerOrderStore.inRoom}</Text>
                }
                <Image
                  source={rightArrowIcon}
                  resizeMode={"contain"}
                  style={styles.icon5}
                />
              </View>
            </View>
            <View style={styles.selectItem}>
              <Text style={styles.font13}>领用人</Text>
              <View style={styles.rightSelectCon}>
                {
                  this.addCallerOrderStore.person === ""
                    ?
                    <Text style={styles.font14}>
                      请选择领用人名称
                    </Text> :
                    <Text style={styles.font141}>{this.addCallerOrderStore.person}</Text>
                }
                <Image
                  source={rightArrowIcon}
                  resizeMode={"contain"}
                  style={styles.icon5}
                />
              </View>
            </View>
            <View style={styles.selectItem}>
              <Text style={styles.font13}>所属部门</Text>
              <View style={styles.rightSelectCon}>
                <Text style={styles.font15}>请先填写领用人姓名, 可自动获取</Text>
              </View>
            </View>
            <View style={styles.memoView}>
              <View style={styles.topMemoTextView}>
                <Text style={styles.font13}>备注</Text>
              </View>
              <View style={{flex: 1, flexDirection: 'row'}}>
                {
                  this.showIcon && this.addCallerOrderStore.memo === "" ?
                    <View style={styles.leftIconView}>
                      <Image
                        source={memoIcon}
                        resizeMode={"contain"}
                        style={styles.icon6}
                      />
                    </View> : null
                }
                <View style={styles.rightView}>
                  <TextInput
                    style={styles.memoInput}
                    underlineColorAndroid="transparent"
                    multiline={true}
                    onChangeText={(text) => {
                      if (this.addCallerOrderStore.memo.length === 100) {

                      } else {
                        this.addCallerOrderStore.memo = text
                      }
                    }
                    }
                    value={this.addCallerOrderStore.memo}
                    onFocus={() => {
                      this.showIcon = false
                    }}
                    onBlur={() => {
                      if (this.addCallerOrderStore.memo === "") {
                        this.showIcon = true
                      } else {
                        this.showIcon = false;
                      }
                    }}
                  />
                </View>
              </View>
              <View style={[styles.topMemoTextView, {justifyContent: "flex-end", height: 30}]}>
                <Text style={styles.font16}>({this.addCallerOrderStore.memo.length}/100)</Text>
              </View>
            </View>
          </View>
          {
            this.addCallerOrderStore.material.length === 0 ?
              null :
              <View style={styles.itemHeader}>
                <Text style={styles.font23}>物料</Text>
              </View>
          }
          {
            this.addCallerOrderStore.material.map((v, i) => {
              return (
                <View style={styles.meItem} key={i}>
                  <View style={styles.conView}>
                    <Text style={styles.font24}>POS机001</Text>
                    <Text style={styles.font25}>数量: 2</Text>
                  </View>
                  <View style={[styles.conView, {alignItems: "flex-end"}]}>
                    <Text style={styles.font24}>¥ 100.00</Text>
                    <TouchableOpacity onPress={this.toSN}>
                      <Text style={styles.font26}>查看SN</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              )
            })
          }
        </ScrollView>
      </View>
    );
  }
}